<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手写原生ajax</title>
</head>
<body>
    <form class="" enctype="multipart/form-data">
        
    </form>
      
    <input type="button" value="提交" id="btn">
    <script>
        $ = id => document.getElementById(id)
        let oBtn = $("btn");
        oBtn.onclick = () => {
            //创建xhr对象
            var xhr = new XMLHttpRequest();
            //连接
            xhr.open('GET','./data1.json', true);
            //发送
            xhr.send()
            //接收
            xhr.onreadystatechange = () => {
                //状态值为4表示body体接收完毕,说明一切就绪
                if(xhr.readyState == 4) {
                    //200为成功,300为重定向所以得这样判断
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                         alert("成功!");
                        //解析数据eval不安全
                        //let p = eval('('+xhr.responseText+')');
                        let json = JSON.stringify(xhr.responseText);
                        console.log(json)
                    } else {
                        alert("失败!");
                    }
                }
                //查看http状态码
                console.log(`htpp状态码: ${xhr.status}`)
            }
        }
    </script>
    <!-- 
     ajax原理,jsonp原理,websocket
     ajax原理:XMLhttpRequest
     ajax特点:用户体验好,性能高
     ajax使用步骤:
     1.创建xhr对象
     2.连接  open(请求方式,请求路径,是否为异步:true(异步)false(同步))
     3.发送  send(body数据(用get不需要写))
     4.接受  xhr.onreadystatechange 当通信状态发生变化的时候
             xhr.readystate()   //准备状态
             0  初始状态  xhr对象刚刚创建完成的时候
             1  连接      刚刚连接到服务器
             2  发送请求   刚刚send完
             3  接收完成  响应头接收完成了
             4  接收完成  body体接收完了
             xhr.status http状态码
             1** 消息
             2** 成功  304也算成功,因为有缓存
             3** 重定向 301永久重定向 302临时重定向 304缓存  比如登录后返回之前的网页 或者是PC和移动的访问重定向
             4** 请求失败
             5** 服务端错误
             6** 自定义
            xml数据     responseXML    获取到返回过来的xml数据   
            文本数据     responseText   文本数据,不是xml统一当做文本数据,和data一样是数据
        -->
</body>

</html>